<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bod y{
				width: 100%;
				height: 1000000px;
				background-image: url(img/布丁狗.png);
				background-size: contain;
				/*函数 cover 等比例放大图片    特点：原图按照比例放大存背景空间
				    【开发者：背景图大小是否等于背景空间】
				    contain 等比例缩放图片  特点：图片按照比例缩放存背景空间
					【开发者：背景图大小是否等于背景空间】
				*/
			   /*背景附件--尺寸中存在cover或者contain*/
			   background-attachment: fixed;
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #aaffff;
				background-image: url(img/布丁狗.png);
				/*问题： 超大图-不显示     小图-显示
				注意：背景空间大小，如果图小于背景空间--平铺
				*/
			   background-repeat: no-repeat;
			   /*不平铺 repeat-x，y 横纵平铺*/
			   background-size: 30%;
			   /*背景尺寸属性值：数值px % |函数 cover */
			   /*背景定位：前提背景空间大于背景图 关键字：center、left、right、top...*/
			   background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, quae at possimus voluptatum quam ratione suscipit cum, vitae error, nesciunt quis officia eligendi libero obcaecati tempora labore adipisci. Magnam, a.
		Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora soluta suscipit, accusantium molestiae commodi at, tempore inventore quam quis iure facilis pariatur modi sunt, praesentium hic nemo debitis quidem dolorum?
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo cumque enim est eaque vitae! Ratione repellendus exercitationem nulla quibusdam id, soluta fugit, culpa voluptatibus est rem dolore asperiores modi velit?
		
		<!-- html img图片 引入一张图片，位置不可随意改变
		     css  背景图片 引入一张图片，位置可以随意改变
			 子属性 background-color 背景颜色
			        background-image 背景图
					 background-repeat背景重复
					 background-size背景尺寸
					 background-attachment背景附件
					 background-position背景定位
			 复合属性 background：background-image background-color background-position 
			           background-size   background-repeat和background-attachment
					   
			简写属性：background background-image background-position|background-size  background-repeat		   
			 代替子属性 background-image、background-color、background-repeat
			 -->
		<div></div>	 
	</body>
</html>